<template>
  <aside class="sidebar">
    <nav class="nav-links"></nav>
    <section class="sidebar-links">
      <h3 class="sidebar-title">Linux 学习整理</h3>
      <ul class="sidebar-group-items">
        <li class="link-hover">
          <a class="sidebar-link" href="#idname">操作系统(OS)</a>
        </li>
        <li class="link-hover">
          <a class="sidebar-link" href="#idname">操作系统(OS)</a>
        </li>
        <li class="link-hover">
          <a class="sidebar-link" href="#idname">操作系统(OS)</a>
        </li>
        <li class="link-hover">
          <a class="sidebar-link" href="#idname">操作系统(OS)</a>
        </li>
        <li class="link-hover">
          <a class="sidebar-link" href="#idname">操作系统(OS)</a>
        </li>
      </ul>
    </section>
  </aside>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'name',
  props: {
  },
  setup (props) {
  }
})
</script>

<style scoped>
.sidebar {
  font-size: 16px;
  background-color: #fff;
  width: 20rem;
  /* position: fixed; */
  z-index: 10;
  margin: 0;
  top: 3.6rem;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  border-right: 1px solid #eaecef;
  overflow-y: auto;
  /* display: flex; */
}
.sidebar-links {
  padding: 1.5rem 0;
}
.sidebar-title {
  color: #2c3e50;
  transition: color 0.15s ease;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: bold;
  padding: 0.35rem 1.5rem 0.35rem 1.25rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border-left: 0.25rem solid transparent;
}
.sidebar-group-items {
  transition: height 0.1s ease-out;
  font-size: 0.95em;
  overflow: hidden;
}
.sidebar-link {
  font-size: 1em;
  font-weight: 400;
  display: inline-block;
  color: #2c3e50;
  border-left: 0.25rem solid transparent;
  padding: 0.35rem 1rem 0.35rem 1.25rem;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
  padding-left: 1.5rem;
}
.link-hover:hover .sidebar-link {
  color: var(--text-color-hover);
}
</style>
